<template>
  <!-- 文档中心首页 -->
  
  <div class="document-center">
    <!-- 头部 -->
    <Top></Top>
    <!-- 主题模块 -->
    <div class="main">
      <!-- 指南 -->
      <div class="guide">
        <!-- 介绍 -->
        <div class="introduce">
          <div class="introduce-title">
            <h1>Hi，欢迎使用文档中心</h1>
          </div>
          <div class="search">
            <el-input
              placeholder="输入关键词搜索"
              v-model="searchContent"
              class="input-with-select"
            >
            </el-input>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </div>
          <hr />
          <div class="keyword">
            <div v-for="(item, index) in keyword" :key="index">
              <el-link
                :href="item.link"
                :underline="false"
                type="primary"
                style="margin-right: 20px"
                >{{ item.msg }}</el-link
              >
            </div>
          </div>
        </div>
        <!-- 公告 -->
        <div class="notice">
          <div class="notice-title">
            <h2>更新公告</h2>
            <el-link href="#" :underline="false" type="primary">
              查看更多
            </el-link>
          </div>
          <div class="notice-content">
            <el-link
              :href="item.link"
              :underline="false"
              v-for="(item, index) in noticeItem"
              :key="index"
            >
              <span class="state">{{ item.state }}</span>
              <span style="width: 283px; margin-left: 10px; text-align: left">{{
                item.msg
              }}</span>
              <span>{{ item.time }}</span>
            </el-link>
          </div>
          <div class="notice-tools">
            <h2>常用工具</h2>
            <div class="tools-items">
              <div v-for="(item, index) in toolsItem" :key="index">
                <el-link :href="item.link" :underline="false">
                  {{ item.msg }}
                </el-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 服务模块 -->
    <div class="service">
      <div class="service-content">
        <div v-for="(item, index) in contentItem" :key="index">
          <img :src="item.img" alt="" />
          <span>
            <strong>{{ item.title }}</strong>
          </span>
          <span style="font-size: 14px">{{ item.msg }}</span>
          <el-button>查看文档</el-button>
        </div>
      </div>
      <div class="service-loading">
        <div v-for="(item, index) in loadingItem" :key="index">
          <dl>
            <dt>
              <div></div>
              <span>{{ item.title }}</span>
            </dt>
            <dd class="list">
              <el-link href="#" :underline="false">
                {{ item.titA }}
              </el-link>
            </dd>
            <dd class="list">
              <el-link href="#" :underline="false">
                {{ item.titB }}
              </el-link>
            </dd>
            <dd class="list">
              <el-link href="#" :underline="false">
                {{ item.titC }}
              </el-link>
            </dd>
            <dd class="list">
              <el-link href="#" :underline="false">
                {{ item.titD }}
              </el-link>
            </dd>
            <dd class="list">
              <el-link href="#" :underline="false">
                {{ item.titE }}
              </el-link>
            </dd>
            <dd class="more">
              <el-link href="#" :underline="false">
                {{ item.titF }}
              </el-link>
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Bottom></Bottom>
  </div>
</template>

<script>
import Bottom from '@/components/bottom/index.vue';
import Top from '@/components/homeTop/index.vue';
export default {
  components: { Bottom,Top },
  data () {
    return {
      searchContent: '',
      keyword: [
        {
          link: '#',
          msg: '调试工具'
        },
        {
          link: '#',
          msg: '保证金'
        },
        {
          link: '#',
          msg: '授权'
        },
        {
          link: '#',
          msg: '店铺类型说明'
        }
      ],
      noticeItem: [
        {
          link: '#',
          state: '最新',
          msg: '【公告】2022年度有赞云API服务费规则',
          time: '2022.04.28'
        },
        {
          link: '#',
          state: '最新',
          msg: '【公告】2022年度有赞云API服务费规则',
          time: '2022.04.28'
        },
        {
          link: '#',
          state: '最新',
          msg: '【公告】2022年度有赞云API服务费规则',
          time: '2022.04.28'
        },
        {
          link: '#',
          state: '最新',
          msg: '【公告】2022年度有赞云API服务费规则',
          time: '2022.04.28'
        },
        {
          link: '#',
          state: '最新',
          msg: '【公告】2022年度有赞云API服务费规则',
          time: '2022.04.28'
        }
      ],
      toolsItem: [
        {
          link: '#',
          msg: '错代码查询'
        },
        {
          link: '#',
          msg: '本地调试工具'
        },
        {
          link: '#',
          msg: 'API调试工具'
        },
        {
          link: '#',
          msg: 'SDK下载'
        }
      ],
      contentItem: [
        {
          link: '#',
          img: require('../../assets/img/ruanjianfuwushang.png'),
          title: '软件服务商',
          msg: '开发订单管理、营销游戏等经营工具，上架至应用市场售卖。'
        },
        {
          link: '#',
          img: require('../../assets/img/shejipingtai.png'),
          title: '设计服务商',
          msg: '设计、开发创意模板主题，上架至模板市场售卖。'
        },
        {
          link: '#',
          img: require('../../assets/img/shangjiaziyan.png'),
          title: '商家自研',
          msg: '具备自主研发能力的有赞商家，对店铺进行系统集成、个性化定制。'
        },
        {
          link: '#',
          img: require('../../assets/img/appkaidian.png'),
          title: 'App开店',
          msg: '有自主研发团队的有赞商家，对店铺进行系统集成、个性化定制。'
        }
      ],
      loadingItem: [
        {
          title: 'API文档',
          titA: '用户',
          titB: '会员',
          titC: '商品',
          titD: '评价',
          titE: '物流',
          titF: '查看更多>'
        },
        {
          title: '消息推送',
          titA: '交易消息',
          titB: '交易退款',
          titC: '客户消息',
          titD: '商品评价',
          titE: '商品消息',
          titF: '查看更多>'
        },
        {
          title: '后端扩展点',
          titA: '交易',
          titB: '营销',
          titC: '库存',
          titD: '分销',
          titE: '支付',
          titF: '查看更多>'
        },
        {
          title: '前端扩展',
          titA: '应用分享',
          titB: '获取当前定位',
          titC: '获取网络类型',
          titD: 'H5&小程序跳转能力表',
          titE: '店铺列表',
          titF: '查看更多>'
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.document-center {
  width: 100%;
  min-width: 1000px;
  .main {
    height: 400px;
    background-image: url("https://b.yzcdn.cn/app-doc/img/home-background.jpg");
    // 指南
    .guide {
      display: flex;
      justify-content: space-between;
      width: 1200px;
      margin: 24px auto;
      // 介绍
      .introduce {
        box-sizing: border-box;
        flex-basis: 710px;
        flex-shrink: 1;
        margin-right: 16px;
        padding: 36px 32px 33px 0;
        background: transparent;
        // 介绍标题
        .introduce-title {
          margin: 32px 0;
          h1 {
            text-align: left;
            color: #323233;
            font-size: 48px;
            font-weight: 700;
            line-height: 48px;
          }
        }
        // 搜索框
        .search {
          display: flex;
          width: 610px;
          height: 40px;
          // border-bottom: 1px solid #323233;
          /deep/.el-input__inner {
            border: 0;
            width: 530px;
            background-color: transparent;
            font-size: 16px;
          }
          .el-button {
            width: 80px;
            height: 40px;
            background-color: #323233;
            border-radius: 20px;
            color: #fff;
          }
        }
        hr {
          display: block;
          width: 610px;
          margin: 8px 0 0;
          background-color: #323233;
          border: 1px solid;
          margin-block-end: 0.5em;
          overflow: hidden;
        }
        .keyword {
          display: flex;
          margin-top: 24px;
          font-size: 14px;
          .el-link {
            color: #155bd4;
          }
        }
      }
      // 公告
      .notice {
        box-sizing: border-box;
        flex-basis: 440px;
        margin: 15px 0;
        flex-shrink: 1;
        padding: 24px;
        background: #fff;
        .notice-title {
          display: flex;
          justify-content: space-between;
          h2 {
            font-size: 16px;
          }
        }
        .notice-content {
          .el-link {
            color: #000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            cursor: pointer;
            span {
              display: inline-block;
              margin-top: 17px;
            }
            .state {
              color: #d40000;
              background-color: #ffebeb;
              font-size: 12px;
            }
          }
        }
        .notice-tools {
          h2 {
            font-size: 16px;
            margin: 40px 0 18px 0;
          }
          .tools-items {
            display: flex;
            justify-content: space-between;
            .el-link:hover {
              color: #155bd4;
            }
          }
        }
      }
    }
  }
  .service {
    width: 100%;
    // height: 700px;
    font-family: Pingfang SC;
    background-color: #fff;
    .service-content {
      display: flex;
      justify-content: space-between;
      max-width: 1200px;
      min-width: 952px;
      margin: 0 auto;
      padding: 36px 24px;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        max-width: 220px;
        flex: 1;
        height: 240px;
        padding: 15px 25px;
        background-color: #fff;
        border: 1px solid #ebedf0;
        border-radius: 2px;
        text-align: center;
        .el-button {
          text-align: center;
          padding: 8px 20px;
        }
      }
      div:hover {
        box-shadow: 0 0 20px #dcdee0;
      }
      .el-button:hover {
        background-color: #155bd4;
        color: #fff;
      }
    }
    .service-loading {
      display: flex;
      justify-content: space-between;
      max-width: 1200px;
      min-width: 952px;
      display: flex;
      margin: 0 auto;
      padding: 36px 24px;
      div {
        display: flex;
        width: 270px;
        flex-direction: column;
        justify-content: space-around;
        dt {
          display: flex;
          align-items: center;
          margin-bottom: 36px;
          font-size: 24px;
          font-weight: 700;
          color: #323233;
          div {
            width: 2px;
            height: 32px;
            background-color: #155bd4;
          }
          span {
            margin-left: 20px;
          }
        }
        .list {
          text-align: left;
          margin: 0 0 26px 20px;
          .el-link {
             font-size: 16px;
           }
          .el-link:hover {
              color: #155bd4;
            }
        }
        .more {
          text-align: left;
          margin-left:20px;
          .el-link {
            font-size: 14px;
            color: #155bd4;
          }
        }
      }
    }
  }
}
</style>
